<template>
  <div id="map-legend">
    <p v-if="!isRoadShow && map_level!=='04'">{{title}}(P<span class="small-tip" v-if="cur_index_type !== '01'">/%</span>):</p>
    <ul v-for="(item,index) in colors_5" v-if="map_level === '04' || isRoadShow">
      <li class="road">
        <span class="color-tip" :style="{backgroundColor:item}"></span>
        <span v-if="index === 4"> 严重拥堵</span>
        <span v-if="index === 3"> 中度拥堵</span>
        <span v-if="index === 2"> 轻度拥堵</span>
        <span v-if="index === 1"> 基本畅通</span>
        <span v-if="index === 0"> 畅通</span>
      </li>
    </ul>

    <ul v-for="(item,index) in colors_5" v-if="map_level === '01'||map_level === '02'||map_level === '03' || map_level === '06'&&!isRoadShow">
      <li class="road">
        <span class="color-tip" :style="{backgroundColor:item}"></span>
        <span v-if="index === 4"> P > {{index_range[3]}} </span>
        <span v-if="index === 3">{{index_range[2]}} < P ≤  {{index_range[3]}}</span>
        <span v-if="index === 2">{{index_range[1]}} < P ≤  {{index_range[2]}}</span>
        <span v-if="index === 1">{{index_range[0]}} < P ≤  {{index_range[1]}}</span>
        <span v-if="index === 0">0 ≤ P < {{index_range[0]}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import eventBus from '../../util/event-bus'
  import MYCONF from '../../myconf'
  export default {
    name: 'MapLegend',
    data () {
      return {
        title: '延时指数',
        colors_3: ['rgba(123, 230, 0, 0.6)','rgba(255,178,0,0.6)', 'rgba(255,0,59,0.6)'],
        colors_4: ['rgba(123, 230, 0, 0.6)','rgba(255,178,0,0.6)', 'rgb(218, 11, 118)', 'rgba(255,0,59,0.6)'],
        colors_5: ['rgba(16, 138, 50, 0.8)','rgba(123, 230, 0, 0.8)','rgba(232,229,72,0.8)', 'rgba(249,125,41,0.8)', 'rgba(255,0,59,0.8)'],
        index_range:[],   //指标值集合
        isRoadShow:false,   //自动切换-道路
        isPoygonShow:false,   //自动切换-行政区
      }
    },
    mounted(){
      this.setMapLegend();
      eventBus.$on('roadLegendShow',(bool) => {
          this.isRoadShow = bool;
      });
      eventBus.$on('roadPoygonShow',(bool) => {
          this.isPoygonShow = bool;
      });
    },
    computed: {
      ...mapGetters(['cur_index_type', 'map_level']),
    },
    methods: {
      setMapLegend(){
        this.index_range = this.cur_index_type === '01' ? MYCONF.DELAY_RANGE : this.cur_index_type === '02' ? MYCONF.JAM_RANGE : MYCONF.SPACE_RANGE;
      }
    },
    watch: {
      cur_index_type(curVal, oldVal){
        if (curVal != oldVal) {
          this.setMapLegend();
          switch (curVal) {
            case '01':
              this.title = '延时指数';
              break;
            case '02':
              this.title = '拥堵里程比例';
              break;
            case '03':
              this.title = '时空拥堵指数';
              break;
            default:
              this.title = '延时指数';
              break;
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common.scss";
  #map-legend {
    position: absolute;
    /*left: 15px;*/
    /*bottom: 20px;*/
    right: 15px;
    top: 20px;
    width: 130px;
    padding: 10px 5px;
    min-height: 140px;
    background-color: rgba(53, 73, 90,0.4);
    border: 1px solid rgba(57, 90, 124, 0.7);
    z-index: 100;
    p{
      text-indent: 2px;
      letter-spacing: 1px;
      opacity: 0.6;
      .small-tip{
        opacity: 0.8;
      }
    }
    ul{
      list-style: none;
      padding-left: 6px;
      margin-top: 8px;
      li{
        height: 26px;
        line-height: 26px;
        .color-tip{
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
        span{

        }
      }
    }
  }
</style>
